<template>
    <div>
        <div class="nameScences">
            <el-button type="text" @click="box1Click">
                <div class="scenceBox">
                    <div class="scenceBox-title">
                        <img src="../../assets/img/nameScenes1.png" alt="">
                        <div class="character">
                            <p>码上寄件</p>
                            <span>扫码寄件，无需出示证件</span>
                        </div>
                    </div>
                    <div><span>查看</span><i class="el-icon-arrow-right"></i></div>
                </div>
             </el-button>
             <el-button type="text" @click="open">
                <div class="scenceBox">
                    <div class="scenceBox-title">
                        <img src="../../assets/img/nameScenes2.png" alt="">
                        <div class="character">
                            <p>信誉评级</p>
                            <span>提升信誉。享受海量特权</span>
                        </div>
                    </div>
                    <div><span>查看</span><i class="el-icon-arrow-right"></i></div>
                </div>
             </el-button>
             <el-button type="text" @click="box3Click">
                <div class="scenceBox">
                    <div class="scenceBox-title">
                        <img src="../../assets/img/nameScenes9.png" alt="">
                        <div class="character">
                            <p>咸鱼买卖</p>
                            <span>提升信用，一键认证开通</span>
                        </div>
                    </div>
                    <div><span>查看</span><i class="el-icon-arrow-right"></i></div>
                </div>
            </el-button>
            <el-button type="text" @click="box4Click">
                <div class="scenceBox">
                    <div class="scenceBox-title">
                        <img src="../../assets/img/nameScenes8.png" alt="">
                        <div class="character">
                            <p>淘宝开店认证</p>
                            <span>淘宝开店，赚钱先行一步</span>
                        </div>
                    </div>
                    <div><span>查看</span><i class="el-icon-arrow-right"></i></div>
                </div>
             </el-button>
             <el-button type="text" @click="box5Click">
                <div class="scenceBox">
                    <div class="scenceBox-title">
                        <img src="../../assets/img/nameScenes7.png" alt="">
                        <div class="character">
                            <p>淘宝扫脸登录</p>
                            <span>扫脸登录，用脸代替密码</span>
                        </div>
                    </div>
                    <div><span>查看</span><i class="el-icon-arrow-right"></i></div>
                </div>
             </el-button>
             <el-button type="text" @click="open">
                <div class="scenceBox">
                    <div class="scenceBox-title">
                        <img src="../../assets/img/nameScenes6.png" alt="">
                        <div class="character">
                            <p>扫脸游景区</p>
                            <span>未来景区，扫脸代替门票</span>
                        </div>
                    </div>
                    <div><span>查看</span><i class="el-icon-arrow-right"></i></div>
                </div>
             </el-button>
             <el-button type="text" @click="open">
                <div class="scenceBox">
                    <div class="scenceBox-title">
                        <img src="../../assets/img/nameScenes3.png" alt="">
                        <div class="character">
                            <p>菜鸟快递柜</p>
                            <span>快递取件，看一眼就到手</span>
                        </div>
                    </div>
                    <div><span>查看</span><i class="el-icon-arrow-right"></i></div>
                </div>
             </el-button>
             <el-button type="text" @click="open">
                <div class="scenceBox">
                    <div class="scenceBox-title">
                        <img src="../../assets/img/nameScenes4.png" alt="">
                        <div class="character">
                            <p>未来酒店</p>
                            <span>未来酒店，扫脸免证入住</span>
                        </div>
                    </div>
                    <div><span>查看</span><i class="el-icon-arrow-right"></i></div>
                </div>
             </el-button>
             <el-button type="text" @click="open">
                <div class="scenceBox">
                    <div class="scenceBox-title">
                        <img src="../../assets/img/nameScenes5.png" alt="">
                        <div class="character">
                            <p>淘咖啡</p>
                            <span>无人超市，体验扫脸付款</span>
                        </div>
                    </div>
                    <div><span>查看</span><i class="el-icon-arrow-right"></i></div>
                </div>
             </el-button>
        </div>
       
    </div>
</template>

<script>
export default {
 methods: {
      open() {
        this.$alert('信誉评级是根据您的购物行为给出的综合评级，信誉评级越高，享受的权益就越多。专属权益包括:极速退款、品质保证险、极速维权、电话优先、闪电退货、APASS会员等。', '信誉评级', {
          confirmButtonText: '我知道了',
        //   callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
        //   }
            });
        },
        box1Click() {
            this.$alert('阿里通行证会员专享。无需携带身份证，无需登记，出示手.机中的阿里通行证快速完成扫码快递寄件。备注:百世快递、中通快递、包裹侠等APP已全面支持扫码!', '码上寄件', {
            confirmButtonText: '我知道了',
          });
        },
        box3Click() {
            this.$alert('闲鱼是全国最大最活跃的闲置物品交易社区，在这里，你能轻松找到与自己兴趣相投的伙伴，方便、放心的交流和交易。', '咸鱼买卖', {
            confirmButtonText: '我知道了',
          });
        },
        box4Click() {
            this.$alert('提前完成淘宝开店认证，实现成为店主的梦，认证通过后可登陆淘宝PC页面进入卖家中心开通店铺。', '淘宝开店认证', {
            confirmButtonText: '我知道了',
          });
        },
        box5Click() {
            this.$alert('扫脸登录是一款确保淘宝平台账户更加安全的身份验证产品，通过扫描脸部可完成账号的登录好身份验证。', '淘宝扫码登录', {
            confirmButtonText: '我知道了',
          });
        }

    }
}
</script>

<style lang="scss" scoped>
.el-button{
    width: 100%;
    margin-left: 10px;
}
.scenceBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 30px;
    padding: 20px 5px;
    border-bottom: 1px solid #d4c7c7;

    &-title{
        display: flex;
        align-items: center;
        img{
            height: 70px;
        }
        .character{
            font-size: 20px;
            margin-left: 20px;
            text-align: left;
            color: #000;
            p{
                margin-bottom: 6px;
            }
        }
    }
    span{
        font-size: 16px;
        color: #817f82;
    }
    .el-icon-arrow-right{
        color: #000;
    }
}
</style>